<template>
  <div class="layout-box" :class="{ 'side-hide': isCollapse }">
    <div class="layout-left">
      <Menu :isCollapse="isCollapse"></Menu>
      <div class="collapse-btn" @click="isCollapse = !isCollapse">
        <el-icon size="20">
          <component :is="isCollapse ? 'Expand' : 'Fold'"></component>
        </el-icon>
      </div>
    </div>
    <div class="layout-right">
      <header-box></header-box>
      <div class="main-box">
        <router-view />
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import Menu from './Menu/index.vue'
import HeaderBox from './Header/index.vue'
const isCollapse = ref(false) // 收起展开
</script>
<style lang="less" scoped>
.layout-box {
  display: flex;
  overflow: hidden;
  height: 100vh;
  .layout-left {
    width: 210px;
    border-right: 1px solid #e4e7ed;
    position: relative;
    .collapse-btn {
      position: absolute;
      top: 18px;
      right: -34px;
      width: 24px;
      height: 24px;
      transition: transform 0.3s;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: rgba(0, 0, 0, 0.65);
      &:hover {
        color: rgba(0, 0, 0, 1);
      }
    }
  }
  .layout-right {
    width: calc(100% - 210px);
  }
  .main-box {
    background: #f2f3f5;
    padding: 10px 12px;
    height: calc(100% - 60px);
    overflow-y: auto;
  }
}
.side-hide {
  .layout-left {
    width: 65px;
  }
  .layout-right {
    width: calc(100% - 65px);
  }
}
</style>
